{% extends "layout.html" %}
{% block header %}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  //$("#board table td a:nth-child(3n+1)").css("background-color", "#ff0000");
});
</script>
{% endblock %}
{% block content %}
  <p class="note">
    Welcome to Buzz Bingo.  This is your game board.  Participate in a
    conversation and mention
    <a href="http://www.google.com/profiles/buzzbingo.io">@buzzbingo.io@gmail.com</a>
    to score.
  </p>
  <br /><br />
  <div id="board">
    <h3>Board</h3>
    <table>
      <thead>
        <tr>
          <th>B</th>
          <th>I</th>
          <th>N</th>
          <th>G</th>
          <th>O</th>
        </tr>
      </thead>
      <tbody>
        {% for row in board %}
        <tr>
          {% for square in row %}
            {% if square %}
              {% if square.is_marked %}
                <td class="marked">
                  <a href="{{ square.search_uri }}">
                    {{ square.topic }}
                  </a>
                </td>
              {% else %}
                <td>
                  <a href="{{ square.post_uri }}">
                    {{ square.topic }}
                  </a>
                </td>
              {% endif %}
            {% else %}
              <td class="scored">
                <img src="http://www.google.com/images/icons/star-35.gif" width="35" height="35" alt="star" title="free square" />
              </td>
            {% endif %}
          {% endfor %}
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  <div id="badges" class="boardBadges">
    <h3>Badges</h3>
    {% if player.badges %}
      <ul class="iconlist">
        {% for badge in player.badges %}
          <li style="background: url('{{ badge.badge_icon }}') no-repeat left top;">
            <strong>{{ badge.badge_title }}</strong> — {{ badge.badge_description }}
          </li>
        {% endfor %}
      </ul>
    {% else %}
      <p>
        No badges yet. Join a conversation!
      </p>
    {% endif %}
  </div>
{% endblock %}
